<template>
    <van-tabbar v-model="active" :placeholder="true">
        <van-tabbar-item name="/home" icon="home-o" to="/home">首页</van-tabbar-item>
        <van-tabbar-item name="/categories" icon="search" to="/categories">分类</van-tabbar-item>
        <van-tabbar-item name="/cart" icon="shopping-cart-o" to="/cart">购物车</van-tabbar-item>
        <van-tabbar-item name="/my-center" icon="setting-o" to="/my-center">我的</van-tabbar-item>
    </van-tabbar>
</template>

<script>
  import { Tabbar, TabbarItem } from "vant"

  export default {
    name: "Tobbar",
    components: {
      [Tabbar.name]: Tabbar,
      [TabbarItem.name]: TabbarItem,
    },
    created() {
      if (this.$route.path !== this.active) {
        this.active = this.$route.path
      }
    },
    data() {
      return {
        active: "/home",
      }
    },
  }
</script>
